<template>
	<view>
		<view class="food-list">
			<view class="food-item" v-for="(item,index)in fodList" :key="index">
				<img class="food-image" src="item.img" alt="">
				<view class="food-info">
					<view class="food-name">{{item.name}}</view>
					<view class="food-description">{{item.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodList:[
					{
						id:1,
						img:'/static/images/hongshaorou.jpg',
						name:'红烧肉',
						desc:'色泽洪亮，味醇汁浓，酥烂而形不碎，香糯而不腻口。'
					},
					{
						id:2,
						img:'/static/gongbaojiding.jpg',
						name:'宫保鸡丁',
						desc:'香辣味浓，肉质滑脆。'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.food-list{
	padding:20rpx;
	}
	food-item{
		dispalay:flex;
		align-items:center;
		margin-bottom:10rpx;
		border:1px solid #ddd;
		padding:10rpx;
		border-radius:5px;
	}
	.food-imsge{
		width: 80px;
		height:80px;
		object-fit:cover;
		margin-right:10px;
	}
	.food-info{
		flex:1;
	}
	.food-name{
		font-size: 18px;
		font-weight:bold;
	}
	
	.food-description{
		color:#666;
	}

</style>

